<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="layout" content="template" />
<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js">
</script>
<script type="text/javascript">
/*****Funtion change status when choose type*****************************************************************/
 function changeStatus() {
		var type = document.getElementById("type");
		if (type.value == "Happy" ||type.value=="Suggest") {
			var status = document.getElementById("status");
			status.value = "Solved";
			status.disabled = "disabled";
		} else {
			var status = document.getElementById("status");
			status.value = "Unsolved";
			status.disabled = false;
		}
}

 function changeProject(id){
	    var params = new Object();
	    params.projectId =id;
	    $.ajax({
	    	url: '${g.createLink(controller: 'Home', action: 'getTeams')}',
	        cache: false,
	        type: 'post',
	        dataType: 'json',
	        data: params,
	        success: function (data){
	            $('#team').empty();
	            if (data.result) {
	                $.each(data.result, function (id, team) {
	                    $('#team').append('<option value="' + team.id + '">' + team.teamName + '</option>');
	                });
	                $("#team").prop('selectedIndex',0);
	                var teamID =$("#team option:selected").val();
	                changeTeam(teamID);
	            }
	        }
	    });
}
 function changeTeam(id) {
		 $.ajax({
			url: '${g.createLink(controller: 'RetrospectiveResult', action: 'listSprintOfTeam')}',
			dataType: 'json',
			data: {
				id: id,
			},
			cache:false,
			success: function(data){
				$("#sprint").empty();
				for(var i = 0; i < data.sprintList.length;i++){
					jQuery('<option value='+data.sprintList[i].id+'>'+data.sprintList[i].sprintName+'</oprion>').appendTo($('select#sprint'));
				}
			/**get sprint lastest of Team**************/
			    var maxSprint=data.maxSprint[0];
			$("#sprint").val(maxSprint).attr('selected',true);
			}
		 });
	}
//*******Function process insert,edit,delete******************************************************************/
		jQuery(document).ready(function( $ ){
			//******Hide or show tab***************************************************/
			function showtab(){
				$('.tabEdit').hide();
				$('.tabList a:first').tab('show');
			}

			$('.tabCreate').on("click",function(){
			if($("#hidenSprintStatus").val()=="Open"){
				jQuery('#form-create').show();//when sprint is open then open tab create
			}else{
				jQuery('#form-create').hide();//sprint closed then cannot create tab
				}
			});
			
			$('[id="cr-retrospective"]').on("click", function(){			
				showall();
			});

			$('.cancel').live("click",function(e){
				showtab();
				})
	        //******show all infomation*************************************************/
			function showall(){
				showtab();
				if($("#team option:selected").val()==""){
						alert("Please chooese a Team !")
					}else{
	        	 var sprint = $("#sprint option:selected").val();
					$.ajax({
						url: '${g.createLink(controller: 'RetrospectiveResult', action: 'showRetrospective')}',					
						data: {sprint : sprint},
						cache:false,
						success: function(data){
							$("#tab1 table tbody").html('');
							var hidenSprintStatus=jQuery('<input type="hidden" id="hidenSprintStatus" value='+data.sprintStatus+'>').appendTo($("#tab1 table tbody"));		
							$.each(data.result,function(index, object){
								var sprintStatus = data.sprintStatus;
								var tr = jQuery('<tr class='+object.id+' id='+object.id+'></tr>');				
								jQuery("<td></td>",{
									text : object.type
								}).appendTo($(tr));
								
								jQuery("<td></td>",{
									text : object.description
								}).appendTo($(tr));
								
								jQuery("<td></td>",{ 
									text : object.status
								}).appendTo($(tr));
								if(sprintStatus=="Open"){								
									if(object.type=="Unhappy" && object.status=="Unsolved"){
										jQuery('<td style="text-align:center"><a class="btn btn-mini btn-primary" id="bt-edit" href="#"><i class="icon-pencil icon-white"></i></a></td>',{ 
										}).appendTo($(tr));
									}else{
										jQuery('<td style="text-align:center"><i class="icon-thumbs-up"></i></a></td>',{ 
										}).appendTo($(tr));
									}
							
									jQuery('<td style="text-align:center"><a class="btn btn-mini" id="bt-delete" href="#"><i class="icon-trash"></i></a></td>',{ 
										text : object.status
										}).appendTo($(tr));
									$(tr).appendTo($("#tab1 table tbody"));
							}else{
									jQuery('<td style="text-align:center"><i>Sprint closed</i></td>',{ 
										}).appendTo($(tr));
									
									jQuery('<td style="text-align:center"><i>Sprint closed</i></td>',{ 
										text : object.status
										}).appendTo($(tr));
									$(tr).appendTo($("#tab1 table tbody"));
								}
							});						
						}
					}, 'json');
					$('#create_modal').modal("show");
					}
		        }
			//********Rules valid*******************************************************/
			$("#form-create").validate({
				 rules: {
					 description: {	                    
	                   required: true 
	                },
	                type:{
	                	required: true 
		           }
		         },
		         messages: {
		        	 description: {
		        	     required: "<div class='alert alert-error'>Please enter description</div>",     
		        	    },
		        	  type: {
			        	 required: "<div class='alert alert-error'>Please choose a type</div>",     
			        	},   
		         },
			     submitHandler:function(form) {
				     $("#sprintHidden").val($("#sprint option:selected").val());
				     var data = new Object();
				  
						data.type = $("#type option:selected").val(); 
						data.description = $("#description").val();
						data.status = $("#status option:selected").val();
						data.sprintID = $("#sprint option:selected").val();
						data.pId=$("#project option:selected").val();
			    	 $.ajax({
			    		url: '${g.createLink(controller: 'RetrospectiveResult', action: 'saveRetro')}',					
						data: data,
						cache:false,
						success: function(data){
							$("#form-create").find('input[type=text], textarea, select').val('');
							showall();
							showtab();
						}
			    	 });
			     }			         
	       	});
			
//**Here start with edit,save edit********************************************************>
       $("#form-edit").validate({
				 rules: {
					 description_edit: {	                    
	                    required: true
	                }
		         },
		         messages: {
		        	 description_edit: "Please enter description..",
	                },
			     submitHandler: function(form) {
			    		var data = new Object();
			    	 	data.id=$('#hiddenID').val();
						data.type = $('[name="type_edit"] option:selected').val();
						data.status = $('[name="status_edit"] option:selected').val();
						data.description = $('[name="description_edit"]').val();
						data.sprintID = $("#sprint option:selected").val();
			    	 $("#sprintHidden2").val($("#sprint option:selected").val());
			    	 $.ajax({
						url: '${g.createLink(controller: 'retrospectiveResult', action: 'saveEditRetro')}',					
						data:data,
						success: function(data){
							$("#form-edit").find('input[type=text], textarea, select').val('');
							showall();
							showtab();
						}
			    	 });
			     }			         
	       	});
//***********Show or hide tab when click a tab of popup form************************************************************************************************/	    	
			$('.tabEdit').hide();
			$('.tabCreate').click(function() {
				$('.tabEdit').hide();
			});
			$('.tabList').click(function() {
				$('.tabEdit').hide();
			});			
			$('#bt-edit').live("click",function(e){
				$('.tabEdit').show();
				$('.tabEdit a:last').tab('show');
				var id = $(this).closest('tr').attr("id");
				var cell = $(this).closest('tr').find('td');
				document.getElementById("hiddenID").value=id;
				document.getElementById("type_edit").value=cell.eq(0).html();
				document.getElementById("description_edit").value=cell.eq(1).html();
				document.getElementById("status_edit").value=cell.eq(2).html();
				if(document.getElementById("status_edit").value=="Solved"||document.getElementById("type_edit").value=="Happy"||document.getElementById("type_edit").value=="Suggest"){
					document.getElementById("status_edit").disabled=true
					}else{
						document.getElementById("status_edit").disabled=false
						}
				})	
								
//*********Delete******************************************************************************************************************************/
			$('#bt-delete').live("click",function(){
				var id = $(this).closest('tr').attr("id");
				 if(confirm("Are you sure delete it !"))
				 {
					 var data = new Object();
					 data.id= id;
					 $.post('${g.createLink(controller: 'RetrospectiveResult', action: 'deleteRetro')}', data);
					 $('.'+id+'').remove();
				}
			})
		});
	</script>
<title>..:Retrospective Page::..</title>
</head>

<body>
	<div class="body">
		<!-- Here show Team and Sprint combobox to choose***************************************************************************************-->
		<p>
			Choose Project : <select id="project" onchange="changeProject(this.value)">
				<option value="" selected="selected">--Select a project--</option>
				<g:each in="${projectList}" var="project">
					<option value="${project.id}">
						${project.projectName}
					</option>
				</g:each>
			</select>
		</p>
		<p>
			Choose Team : <select id="team" onchange="changeTeam(this.value)">

			</select>
		</p>
		<p>
			Choose Sprint : <select id="sprint"></select>
		</p>

		<input type="button" id="cr-retrospective" class="btn btn-primary"	value="New Meeting" action="showRetrospective" />

		<%--POPUP SHOW INFO AND CREATE ***********************************************************************************************************************************--%>
		<div id="create_modal" class="modal hide fade"	style="width: 700px; align: center">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4>Meeting</h4>
			</div>
			<div class="modal-body">
				<%--Here show content of body popup --%>

				<div class="tabbable">
					<!-- Only required for left/right tabs -->
					<ul class="nav nav-tabs">
						<!-- Here choose type of retrospective*********************************************************************** -->
						<p>
							Choose type : <select>
								<option value="Planning">Planning</option>
								<option value="Retrospective">Retrospective</option>
								<option value="Daily">Daily meeting</option>
							</select>
						</p>
						<li class="tabList active"><a href="#tab1" data-toggle="tab">List
								Retrospectives</a></li>
						<li class="tabCreate"><a href="#tab2" data-toggle="tab">New
								Retrospective</a></li>
						<li class="tabEdit"><a href="#tab3" data-toggle="tab">Edit
								Retrospective</a></li>
					</ul>
					<div class="tab-content">
						<div class="tab-pane active" id="tab1">
							<table class="table table-bordered">
								<thead>
									<th>Type</th>
									<th>Content</th>
									<th>Status</th>
									<th>Edit</th>
									<th>Delete</th>
								</thead>
								<tbody></tbody>
							</table>
						</div>
						<div class="tab-pane" id="tab2">
							<!-- Here put create content*?????????????????????????????????????????????????????????????????????? -->
							<g:form name="form-create">
								<input type="hidden" name="sprintID" id="sprintHidden" value="" />
								<table class="table table-bordered">
									<tr>
										<td>Type</td>
										<td><select name="type" id="type"	onchange="changeStatus()">
												<option value="" selected="selected">-- select a type --</option>
												<option value="Happy">Happy</option>
												<option value="Unhappy">Unhappy</option>
												<option value="Suggest">Suggest</option>
										</select></td>
									</tr>
									<tr>
										<td><label for="description">Description</label></td>
										<td><g:textArea name="description" required="required" /></td>
									</tr>
									<tr>
										<td>Status</td>
										<td><select name="status" id="status">
												<option value="Solved">Solved</option>
												<option value="Unsolved" selected="selected">Unsolved</option>
										</select></td>
									</tr>
									<tr>
										<td><input class="btn btn-primary save-retro"	type="submit" value="  Save " /></td>
										<td><input class="btn btn-primary" type="reset" 	value=" Reset " /></td>
									</tr>
								</table>
							</g:form>
						</div>
						<!-- -****************************************************** -->
						<div class="tab-pane" id="tab3">
							<g:form name="form-edit">
								<input type="hidden" id="hiddenID" value="" />
								<input type="hidden" name="sprintID" id="sprintHidden" value="" />
								<table calss="table table-bordered">
									<tr>
										<td>Type</td>
										<td><select disabled="disabled" name="type_edit"
											id="type_edit" onchange="changeStatus()">
												<option value="Happy">Happy</option>
												<option value="Unhappy" selected="selected">Unhappy</option>
												<option value="Suggest">Suggest</option>
										</select></td>
									</tr>
									<tr>
										<td>Discription :</td>
										<td><g:textArea name="description_edit"
												id="description_edit" required="required" /><label
											class="error" style="display: none;"></label></td>
									</tr>
									<tr>
										<td>Status</td>
										<td><select name="status_edit" id="status_edit">
												<option value="Solved">Solved</option>
												<option value="Unsolved" selected="selected">Unsolved</option>
										</select></td>
									</tr>
									<tr>
										<td><input class="btn btn-primary save-edit-retro"
											type="submit" value="  Save " /></td>
										<td><input class="btn btn-primary cancel" type="button"
											value=" Cancel " /></td>
									</tr>
								</table>
							</g:form>
						</div>
						<!-- -****************************************************** -->
					</div>
				</div>
			</div>
		</div>
		<%--***********************************************************************************************************************************--%>
	</div>
</body>
</html>